/**
* 图表界面
*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <!-- <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-input size="small" v-model="machineNo" placeholder="请输入所属公司"></el-input>
            </el-col>
            <el-col :span="7">
              <el-input size="small" v-model="machineNo" placeholder="请输入资产编号"></el-input>
            </el-col>
            <el-col :span="7">
              <el-input size="small" v-model="machineNo" placeholder="请输入"></el-input>
            </el-col>
            <el-col :span="3" class="stsearch">
              <el-button size="small" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stbgc">
          <el-row>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="day">日</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="month">月</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="years">年</el-radio>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row> -->
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="23" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
import { getAdminRecord } from '../../api/userMG'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      formInline: {
        page: 1,
        pagenum: 10,
        adid: '',
        starttime: this.timestampToTime(new Date()),
        endtime: this.timestampToTime(new Date()),
      },
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      //  平台流水额 
      SCEoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '平台流水额',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '平台流水额',
          type: 'bar',
          barGap: 0,
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      },
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() { 
    let aaa=new Date('2022-06-27 16:26:23')
    console.log(aaa.getDate())
    this.getdata(this.formInline)
  },
  // 挂载结束状态(里面是操作)
  mounted() {
    let _this=this;
    setTimeout(function(){
        _this.getSCE()
    },1000)
  },
  // 里面的函数只有调用才会执行
  methods: {
    //转换成年月日时间
     timestampToTime(cjsj) {
        var date = cjsj
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() < 10 ? '0' + date.getDate():date.getDate()+' '
        var h = (date.getHours() < 10 ? '0' + date.getHours():date.getHours()) + ':'
        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes():date.getMinutes()) + ':'
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds():date.getSeconds()
        return Y + M + D + h + m + s;
    },
    // 获取列表
    getdata(parameter) {
      this.loading = true
      getAdminRecord(parameter).then(res => {
        this.loading = false
        this.$message({
          type: 'info',
          message: res.message
        })
        this.listData = res.date;
        // 分页赋值
        // this.pageparm.currentPage = this.formInline.page
        // this.pageparm.pageSize = this.formInline.limit
        this.pageparm.total = res.count
      }).catch(err => {
        let shuzu=[
{ID: 1, uid: 3, money: 160, time: 15, uuid: "0020", remark: "用户充值", orderid: "DDCZ202262634"},
{ID: 2, uid: 3, money: 330, time: 22, uuid: "0020", remark: "用户充值", orderid: "DDXF2022626311"},
{ID: 3, uid: 3, money: 665, time: 22, uuid: "0020", remark: "下单支付", orderid: "DDXF2022626311"},
{ID: 4, uid: 3, money: 1555, time: 24, uuid: "0020", remark: "用户充值", orderid: "DDXF2022626313"},
{ID: 5, uid: 3, money: 2331, time: 24, uuid: "0020", remark: "下单支付", orderid: "DDXF2022626313"},
{ID: 6, uid: 3, money: 888, time: 21, uuid: "0020", remark: "用户充值", orderid: "DDXF2022626310"},
{ID: 7, uid: 3, money: 512, time: 21, uuid: "0020", remark: "下单支付", orderid: "DDXF2022626310"},
{ID: 8, uid: 3, money: 1999, time: 25, uuid: "0020", remark: "用户充值", orderid: "DDCZ2022626314"},
{ID: 9, uid: 3, money: 777, time: 26, uuid: "0020", remark: "用户充值", orderid: "DDCZ2022626315"}]

        shuzu.forEach((item,index) => {
            this.SCEoption.xAxis.data.push(item.time)
            this.SCEoption.series[0].data.push(item.money)
        })
        this.loading = false
        this.$message.error('菜单加载失败，请稍后再试！')
      })
    },
    // 交易总笔数
    getSCE() {
      this.chart = Chart.init(this.$refs.SCEchart)
      this.chart.setOption(this.SCEoption)
    },

  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 50vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>